<template>
  <view class="page price-table-page">
    <view class="top-fixed">
      <view class="top-search clearfix">
        <u-icon name="search" size="32" color="#999"></u-icon>
        <input
          class="top-input"
          confirm-type="search"
          placeholder-class="input-pl"
          placeholder="商品名称、编码"
          type="text"
          v-model="keyword"
          @confirm="getData"
        />
        <u-icon
          name="close"
          size="24"
          color="#999"
          v-show="keyword"
          @click="clearKeyword"
        ></u-icon>
      </view>
      <view class="search-sel">
        <view class="search-sel-li" @click="showCate = true">
          <text class="sel-label sel-name" v-if="now_cate_tit">{{
            now_cate_tit
          }}</text>
          <text class="sel-label" v-else>商品分类</text>
          <u-icon
            class="ic-down"
            name="arrow-down"
            size="16"
            color="#999"
          ></u-icon>
        </view>
        <view class="search-sel-li">
          <ShopSel @pickerChange="pickerShopChange">
            <text class="sel-label sel-name" v-if="shopName">{{
              shopName
            }}</text>
            <text class="sel-label" v-else>销售店铺</text>
            <u-icon
              class="ic-down"
              name="arrow-down"
              size="16"
              color="#999"
            ></u-icon>
          </ShopSel>
        </view>
      </view>
    </view>
    <view class="container-view">
      <scroll-view
        :lower-threshold="42"
        @scrolltolower="scrollLoading"
        scroll-y
        class="list-ul"
      >
        <view v-for="(item, index) in price_data" :key="index">
          <view class="list-item clearfix" @click="goDetail(item)">
            <view class="list-label clearfix">
              <view class="float_left list-name ellipsis">{{
                item.goodsName
              }}</view>
              <view class="float_right status-text">{{ item.code }}</view>
            </view>
            <view class="list-cont">
              <view class="clearfix">
                <text class="float_left"
                  >商品分类：{{ item.categoryName }}</text
                >
              </view>
              <view class="success-color">调价</view>
              <view class="clearfix">
                <view>
                  <!-- 可根据需要恢复价格显示 -->
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-show="loading_status !== 'more'" class="loading-view">{{
          loading_status === "loading" ? "加载中..." : "没有更多了"
        }}</view>
      </scroll-view>
    </view>
    <CateSel
      :showModel="showCate"
      @confirm="cateConfirm"
      @cancel="showCate = false"
      v-if="showCate"
    ></CateSel>
  </view>
</template>

<script>
import CateSel from "@/components/CateSel.vue";
import ShopSel from "@/components/ShopSel.vue";
export default {
  components: {
    CateSel,
    ShopSel,
  },
  data() {
    return {
      shopName: "",
      showCate: false,
      now_cate_tit: "",
      price_data: [],
      page: 1,
      pageTotal: 0,
      pageSize: 10,
      keyword: "",
      shopId: "",
      categoryId: "",
      loading_status: "noMore",
      shopList: [],
      cateList: [],
    };
  },
  computed: {
    enterprise() {
      return this.$store.state.enterprise;
    },
  },
  onLoad() {
    this.shopId = this.enterprise ? this.enterprise.shopId : "";
    this.getAllGoodsPrice();
  },
  methods: {
    pickerShopChange(row) {
      this.shopName = row ? row.name : "";
      this.shopId = row ? row.id : "";
      this.page = 1;
      this.getData();
    },
    cateConfirm({ lastCate, params }) {
      this.showCate = false;
      this.categoryId = lastCate ? lastCate.id : "";
      this.now_cate_tit = lastCate ? lastCate.title : "";
      this.page = 1;
      this.getData();
    },
    scrollLoading() {
      if (this.pageTotal / this.pageSize > this.page) {
        this.page += 1;
        this.getData();
      } else {
        this.loading_status = "noMore";
      }
    },
    clearKeyword() {
      this.keyword = "";
      this.page = 1;
      this.getData();
    },
    async getAllGoodsPrice() {
      this.loading_status = "loading";
      const res = await this.$u.api.getAllGoodsPrice({
        page: this.page,
        pageSize: this.pageSize,
        shopId: this.shopId,
      });
      this.loading_status = "more";
      uni.stopPullDownRefresh();
      if (!res || !res.data || !Array.isArray(res.data)) return;
      const cData = res.data;
      if (this.page === 1) {
        this.price_data = cData;
      } else {
        this.price_data = this.price_data.concat(cData);
      }
      this.pageTotal = res.pageTotal || 0;
      // 根据shopId去重生成shopList
      const shopMap = {};
      this.shopList = [];
      this.price_data.forEach((item) => {
        if (item.shopId && !shopMap[item.shopId]) {
          this.shopList.push({
            id: item.shopId,
            shopName: item.shopName,
          });
          shopMap[item.shopId] = true;
        }
      });
    },
    async searchPrice() {
      this.loading_status = "loading";
      const res = await this.$u.api.searchPrice({
        page: this.page,
        pageSize: this.pageSize,
        keyword: this.keyword,
        shopId: this.shopId,
        categoryId: this.categoryId,
      });
      this.loading_status = "more";
      uni.stopPullDownRefresh();
      if (!res || !res.data || !Array.isArray(res.data)) return;
      const cData = res.data;
      if (this.page === 1) {
        this.price_data = cData;
      } else {
        this.price_data = this.price_data.concat(cData);
      }
      this.pageTotal = res.pageTotal || 0;
      // 根据shopId去重生成shopList
      const shopMap = {};
      this.shopList = [];
      this.price_data.forEach((item) => {
        if (item.shopId && !shopMap[item.shopId]) {
          this.shopList.push({
            id: item.shopId,
            shopName: item.shopName,
          });
          shopMap[item.shopId] = true;
        }
      });
    },
    isSerch(obj) {
      // 只要 keyword 或 categoryId 有值就认为是搜索
      return !!(obj.keyword && obj.keyword.trim()) || !!obj.categoryId;
    },
    getData() {
      const obj = {
        keyword: this.keyword,
        categoryId: this.categoryId,
      };
      const isKey = this.isSerch(obj);
      if (isKey) {
        this.searchPrice();
      } else {
        this.getAllGoodsPrice();
      }
    },
    goDetail(item) {
      this.goPage(
        `/pagesB/goods/PriceTableAdjust?goodsId=${item.goodsId}`
        // encodeURIComponent(JSON.stringify(item))
      );
    },
  },
};
</script>

<style lang="scss">
.page.price-table-page {
  background: #f8f8f8;
  min-height: 100vh;
}
.top-fixed {
  background: #fff;
  padding-bottom: 16upx;
  box-shadow: 0 2upx 8upx #eee;
}
.top-search {
  display: flex;
  align-items: center;
  padding: 18upx 24upx;
  border-bottom: 1upx solid #f0f0f0;
  background: #fff;
}
.icon-search {
  width: 36upx;
  height: 36upx;
  margin-right: 12upx;
}
.top-input {
  flex: 1;
  height: 48upx;
  line-height: 48upx;
  border: none;
  background: #f5f5f5;
  border-radius: 8upx;
  padding: 0 16upx;
  font-size: 28upx;
}
.icon-close {
  width: 32upx;
  height: 32upx;
  margin-left: 8upx;
}
.search-sel {
  display: flex;
  padding: 12upx 24upx;
  background: #fff;
}
.search-sel-li {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 28upx;
  color: #666;
}
.sel-label {
  margin-right: 8upx;
}
.ic-down {
  width: 24upx;
  height: 24upx;
}
.container-view {
  padding: 0 0 120upx 0;
}
.list-ul {
  padding: 0 24upx;
  box-sizing: border-box;
  padding-top: 10px;
}
.list-item {
  background: #fff;
  border-radius: 12upx;
  margin-bottom: 18upx;
  padding: 24upx;
  box-shadow: 0 2upx 8upx #eee;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.list-item:active {
  box-shadow: 0 4upx 16upx #ddd;
}
.list-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8upx;
}
.list-name {
  font-size: 30upx;
  font-weight: 600;
  color: #222;
}
.status-text {
  font-size: 24upx;
  color: #999;
}
.list-cont {
  font-size: 26upx;
  color: #666;
}
.success-color {
  color: #67c23a;
  font-size: 26upx;
  margin-top: 8upx;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loading-view {
  text-align: center;
  color: #999;
  padding: 20upx 0;
}
</style>
